<template>
  <div>
    <h2>注册页面</h2>
    <table class="table table-bordered">
      <tr>
        <td>账号</td>
        <td>
          <input type="text" v-model="sdate.U_Name" />
        </td>
      </tr>
      <tr>
        <td>密码</td>
        <td>
          <input type="password" v-model="sdate.U_Pwd" />
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <input type="button" value="注册" @click="add" />
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
let router = useRouter();
let route = useRoute();

let data = reactive({
  sdate: {
    U_Name: '',
    U_Pwd: '',
  },
});

let { sdate } = toRefs(data);

const add = () => {
  if (sdate.value.U_Name == '') {
    alert('用户名不能为空');
    return;
  }
  if (sdate.value.U_Pwd == '') {
    alert('密码不能为空');
    return;
  }

  if (
    Number(sdate.value.U_Pwd.length) < 6 ||
    Number(sdate.value.U_Pwd.length) > 30
  ) {
    alert('用户密码不能少于6位最大不能超过30位');
    return;
  }

  axios({
    url: 'http://localhost:64124/api/Text01/PostUserAdd',
    method: 'post',
    data: sdate.value,
  })
    .then((res) => {
      console.log(res);
      if (res.data.data > 0) {
        alert('注册成功');
        router.push('/show');
      } else if (res.data.data == -100) {
        alert('用户名重复');
        return;
      } else {
        alert('用户注册失败');
        return;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
